import { AudioMutedOutlined, AudioOutlined } from "@ant-design/icons";
import { Button, Flex, message, Modal } from "antd";
import { useContext, useEffect } from "react";
import Draggable from "react-draggable";
import styles from "./style.module.scss";
import { MyContext } from "../../../store";
import useDraggable from "../../../hooks/useDraggable";
import useModal from "../../../hooks/useModal";

export default () => {
  const {
    isModalOpen,
    showModal,
    hideModal,
    inCall,
    setCallType,
    callType,
    setInCall,
    callInfo,
    setCallInfo,
    mute,
    setMute,
    hold,
    setHold
  } = useModal();
  // 拖拽控制
  const { draggleRef, disabled, setDisabled, bounds, onStart } = useDraggable();

  const { sipContext } = useContext(MyContext);
  // const {sipContext} = useContext(MyContext)


  useEffect(() => {
    const { sipMessage } = sipContext;
    if (sipMessage) {
      if (["OUTGOING_CALL", "INCOMING_CALL"].includes(sipMessage.event)) {
        showModal();
        setCallInfo({
          phone: sipMessage.data.otherLegNumber
        });
        setCallType(sipMessage.event);
      }

      // 静音
      if ("MUTE" === sipMessage.event) {
        setMute(true);
      }

      //取消静音
      if ("UNMUTE" === sipMessage.event) {
        setMute(false);
      }

      // 保持
      if ("HOLD" === sipMessage.event) {
        setHold(true);
      }

      /*if ('LATENCY_STAT' === sipMessage.event) {
          showModal()
      }*/

      if (sipMessage.event === "CALL_END") {
        message.success(`呼叫结束:cause:${sipMessage.data.cause};code:${sipMessage.data.code};originator:${sipMessage.data.originator}`).then(r => r);
        hideModal();
      }

      if (sipMessage.event === "IN_CALL") {
        setHold(false);
        setInCall(true);
      }
    }
  }, [sipContext.sipMessage]);


  return (
    <>
      <Modal
        wrapClassName={styles.zrjCSS}
        title={
          <div
            className={
              "h-32 flex justify-between items-center w-full  cursor-move bg-green-900 border-b border-solid border-gray-800"
            }
            onMouseOver={() => {
              if (disabled) {
                setDisabled(false);
              }
            }}
            onMouseOut={() => {
              setDisabled(true);
            }}
          >
            <div className={"text-xs px-10 text-white"}>
              {inCall ? "通话中" : callType === "INCOMING_CALL" ? "来电提醒" : "呼叫中"}
              {callType !== "INCOMING_CALL" && <>({sipContext?.sipCallTime})</>}

              <span className={"ml-5"}>
                {
                  mute ? <AudioMutedOutlined /> : <AudioOutlined />
                }
              </span>

            </div>
            {/* <div className={'mr-45'}>
              <FullscreenOutlined onClick={() => {
                sipDispatch(setSipVisibleOperation(true))
              }} className={'text-white cursor-pointer'}/>
            </div>*/}
          </div>
        }
        className={styles.modal}
        open={isModalOpen}
        onOk={hideModal}
        onCancel={() => {
          sipContext?.sipClient?.hangup?.();
        }}
        destroyOnClose={true}
        width={400}
        mask={false}
        keyboard={false}
        maskClosable={false}
        footer={false}
        zIndex={99999}
        modalRender={(modal) => (
          <Draggable
            disabled={disabled}
            bounds={bounds}
            nodeRef={draggleRef}
            onStart={(event, uiData) => onStart(event, uiData)}
          >
            <div ref={draggleRef}>{modal}</div>
          </Draggable>
        )}
      >
        <div className={"pt-10"}>
          <Flex vertical={true} gap={10} className={"text-left px-10"}>
            <div className={"text-sm text-white"}>{callInfo.phone}</div>
            {/*<div className={'text-xs text-gray-400'}>安徽合肥电信</div>*/}
            {callType === "OUTGOING_CALL" &&
              <div
                className={"text-xs text-white"}>主叫号码：{sipContext?.sipClient?.localAgent}</div>}

          </Flex>
          <div className={"py-10 mt-10 border-b border-t border-solid border-gray-800"}>
            {inCall ? (
              <Flex gap={10} wrap={true} justify={"center"}>
                <Button
                  className={"w-90"}
                  type={"primary"}
                  icon={
                    <svg className="iconfont">
                      <use xlinkHref="#icon-guaduan"></use>
                    </svg>
                  }
                  danger
                  onClick={() => {
                    sipContext?.sipClient?.hangup?.();
                  }}
                  shape={"round"}
                >
                  挂断
                </Button>
                {
                  mute ? <Button color="primary" className={"w-90"} variant="outlined" shape={"round"}
                                 onClick={() => sipContext?.sipClient?.unmute?.()}>
                      取消静音
                    </Button> :
                    <Button color="primary" disabled={hold} style={{ color: hold ? "#ffffff" : "" }} className={"w-90"}
                            variant="outlined" shape={"round"}
                            onClick={() => sipContext?.sipClient?.mute?.()}>
                      静音
                    </Button>
                }

                {
                  hold ? <Button color="primary" className={"w-90"} variant="outlined" shape={"round"}
                                 onClick={() => sipContext?.sipClient?.unhold?.()}>
                      通话取回
                    </Button> :
                    <Button disabled={mute} style={{ color: mute ? "#ffffff" : "" }} color="primary" className={"w-90"}
                            variant="outlined" shape={"round"}
                            onClick={() => sipContext?.sipClient?.hold?.()}>
                      通话保持
                    </Button>
                }

                {/*<Button type="primary" className={'w-90'} shape={'round'}
                        onClick={() => sipContext?.sipClient?.transfer?.('1111')}>
                  转接
                </Button>*/}
                {/*   <Button type="primary" className={'w-90'} shape={'round'}>
                  咨询
                </Button>
                <Button type="primary" className={'w-90'} shape={'round'}>
                  自助服务
                </Button>
                <Button type="primary" className={'w-90'} shape={'round'}>
                  输入号码
                </Button>*/}
              </Flex>
            ) : (
              <Flex justify={"center"} gap={15}>
                {
                  callType === "INCOMING_CALL" && <Button
                    type="primary"
                    className={"w-90"}
                    shape={"round"}
                    onClick={() => sipContext?.sipClient?.answer?.()}
                  >
                    接通
                  </Button>
                }
                <Button
                  className={"w-150"}
                  type={"primary"}
                  icon={
                    <svg className="iconfont">
                      <use xlinkHref="#icon-guaduan"></use>
                    </svg>
                  }
                  danger
                  onClick={() => {
                    sipContext?.sipClient?.hangup?.();
                  }}
                  shape={"round"}
                >
                  挂断
                </Button>
              </Flex>
            )}
          </div>
        </div>
      </Modal>
    </>
  );
};
